<template>
  <div>
    <h2 :style="str">你好啊1！</h2>
    <h2 :style="obj">你好啊2！</h2>
    <h2 :style="arr">你好啊3！</h2>
  </div>
</template>

<script>
  export default {
    name:'App',
    data() {
      return {
        str:'color: red;font-size: 50px;',
        obj:{
          color:'red',
          backgroundColor:'green'
        },
        arr:[
          {
            color:'red',
            fontSize:'70px'
          },
          {
            fontWeight:100
          }
        ]
      }
    },
  }
</script>

<style>
  .basic{
    width: 400px;
    height: 100px;
    border: 1px solid black;
  }

  /* 三种心情，三选一 */
  .happy{
    border: 4px solid red;;
    background-color: rgba(255, 255, 0, 0.644);
    background: linear-gradient(30deg,yellow,pink,orange,yellow);
  }
  .sad{
    border: 4px dashed black;
    background-color: gray;
  }
  .normal{
    border: 4px solid deepskyblue;
    background-color: skyblue;
  }

  /* 三个样式，随意选择，可以同时存在 */
  .atguigu1{
    background-color: yellowgreen;
  }
  .atguigu2{
    text-shadow:2px 2px 10px red;
  }
  .atguigu3{
    border-radius: 20px;
  }
</style>